<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全是干货</title>
</head>
<script>
    //如何定义函数
    function test(){
        //如何获取网页中的与元素，通过id获取
        let name = document.getElementById("nameinput").value;
        let div1 = document.getElementById("div1");
        if (name.length<2){
            alert("请输入正确的名字");
            return

        }
        if(name.length>10){
            alert("青青草原的名字哪有那么长");
            return

        }

        let pswd = document.getElementById("pswdinput").value;
        let repswd = document.getElementById("repswdinput").value;
        if (pswd != repswd){
        alert("再次输入密码不一致");
            return
        }       
        if (name.includes("羊羊")){
            alret("名字不要取那么怪") 
            return
        }   
        if (name.startsWith("坂田")){
            alret("青青草原没有坂田这个姓") 
            return
        }   
        if (name.endsWith("次郎")){
            
            name = name.replace("次郎","太狼");
            document.getElementById("nameinput").value = name;
            return
        }   

        div1.innerText = div1.innerText + name;
    }
    
     
</script>


<body>

    <div>
        <div id="div1">我是青青草原狼王</div>
        <div id="div2"> <input type="text" id="nameinput"> </div>
        <input type="text" id="nameinput">
        密码:
        <input type="password" id="pswdinput">
        确认密码:
        <input type="password" id="repswdinput">
        性别:
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        
        <div id="div3"> </div>
        <div id="div4"> </div>
        <div id="div5"> </div>
        <button onclick="test()"> 按钮 </button>


    </div>
    
</body>
</html>